<template>
  <div>
    <!-- 订单信息 -->
    <el-form style="margin-top: 20px;margin-left: 20px">
      <el-row>
        <el-col :span="24" class="row-title">
          <h2>订单信息</h2>
        </el-col>
      </el-row>
      <el-col :span="24">
        <el-row>
          <el-col :span="6">
            <el-form-item label="订单ID:">
              {{ order.id }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="会员ID:">
              {{ member.appUserId }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="会员名称:">
              {{ member.appUserName }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态:">
              {{ order.status |dictFilter(enums.orderStatusEnum) }}
            </el-form-item>
          </el-col>

        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="兑换时间:">
              {{ order.addDate | parseDateTime }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="产品名称:">
              {{ product.name }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="产品图片:">
              <img :src="product.imageUrl" width="60" height="60">
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>

      <el-row>
        <el-col :span="24" class="row-title">
          <h2>收件信息</h2>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="省份:">
            {{ order.province }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="城市:">
            {{ order.city }}
          </el-form-item>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="详细地址:">
            {{ order.address }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="手机号:">
            {{ order.mobile }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收货人:">
            {{ order.name }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="物流订单号:">
            {{ order.logisticsNo }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item>
          <el-button :disabled="order.status===enums.orderStatusEnum.SEND.value" type="primary" @click="send">发货</el-button>
        </el-form-item>
      </el-row>
    </el-form>

  </div>
</template>

<script>
import orderStatusEnum from '@/enums/order/orderStatusEnum'
import orderApi from '@/api/order/order'
import SmallImage from '@/components/SmallImage'

export default {
  name: 'OrderDetail',
  components:{
    SmallImage
  },
  props: {
    id: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      enums: {
        orderStatusEnum
      },
      order: {
        id: null
      },
      member: {
        id: null
      },
      product: {
        id: null
      }
    }
  },
  computed: {

  },
  mounted() {
    this.getDetail()
  },
  methods: {
    refresh() {
      this.getDetail()
    },
    getDetail() {
      orderApi.detail({ id: this.id }).then(response => {
        if (response.data.code === 200) {
          this.order = response.data.data.order || {}
          this.member = response.data.data.member || {}
          this.product = response.data.data.product || {}
        } else {
          this.$message.error(response.data.msg)
        }
      })
    },
    send() {
      this.$prompt('请输入物流订单号', '发货', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        if(!value){
          this.$message.error("请输入物流订单号")
          return
        }
        orderApi.send({ id: this.id,logisticsNo: value }).then(response => {
          if (response.data.code === 200) {
            this.$message.success('操作成功')
            this.refresh()
          } else {
            this.$message.error(response.data.msg)
          }
        })
      })

    }
  }
}

</script>

<style scoped>
  .avatar-uploader-wrapper {
    display: flex;
    flex-flow: column;
    align-items: center;
  }

  .avatar-uploader {
    padding: 0 20px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    display: block;
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
